<template name="changeClothes">
	<view class="content-seaction">
		<view class="nav-seaction">
			<template v-for="tab in navCategoryList" :key="tab.id">
				<view :class="{ 'nav-item':true, 'nav-item__actived': activeName === tab.id }"
					@click="activeName = tab.id">
					<text class="nav-text">{{ tab.firstName }}</text>
				</view>
			</template>
		</view>
		<!-- 商品区 -->
		<scroll-view class="details-seaction" scroll-y="true" :show-scrollbar="true">
			<view class="goods-box" v-if="refreshGoodsPage">
				<view class="title-seaction">
					<text>{{ goodsCategoryName }}</text>
				</view>
				<view class="goods-seaction" v-for="goods in goodsList" :key="goods.id">
					<view class="goods-img">
						<image :src="picBaseUrl  + goods.picUrl" alt="" />
					</view>
					<view class="goods-info">
						<text class="goods-secondName">{{ goods.secondName }}</text>
						<view class="goods-price">
							<text>￥{{ goods.price }}<text class="mini-size">起</text></text>
							<uni-icons class="add-icon" type="plusempty" color="#fff"
								@click.prevent.stop="openPopup(goods)" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<popupDialog ref="popupRef" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, computed, onBeforeUnmount } from "vue"
	import popupDialog from "./popupDialog.vue"
	import { navChildCategory, getChangeClothesGoods } from "@/api/http/followHeartService"
	import { Service } from "@/api/types/Service"
	import { picBaseUrl } from "@/api/request"
	
	/**
	 * useTo: 获取 上装裤装裙装
	 */
	let navCategoryList = ref<Service.navChildCategoryType[]>()
	const getNavCategoryList = async () => {
		let data = await navChildCategory(props.currentNavInfo.id)
		navCategoryList.value = data || []
	}
	onMounted(async () => {
		await getNavCategoryList()
	})
	
	/**
	 * useTo: 记录当前tab，监听tab变化调用接口获取商品列表，刷新商品盒子提高用户体验
	 */
	let activeName = ref<number>(1)
	const getGoodsList = async (pid : number) => {
		let data = await getChangeClothesGoods(pid)
		goodsList.value = data || []
		refreshGoods()
	}
	watch(activeName, async (val : number) => {
		await getGoodsList(val)
	},
	{
		immediate: true
	})
	let refreshGoodsPage = ref<boolean>(true)
	let timer : NodeJS.Timer
	const refreshGoods = () => {
		refreshGoodsPage.value = false
		timer = setTimeout(() => {
			refreshGoodsPage.value = true
		}, 50)
	}
	onBeforeUnmount(() => {
		clearTimeout(timer)
	})
	
	/**
	 * useTo: 商品列表，渲染列表, 获取当前tab的name
	 */
	let goodsList = ref<Service.goodsType[]>([])
	
	let goodsCategoryName = computed(() => (navCategoryList.value || []).find(item => item.id === activeName.value)?.firstName)

	/**
	 *  加购弹出框
	 */
	let popupRef = ref()
	const props = defineProps<{
		currentNavInfo : Service.globalNavType
	}>()
	const openPopup = (goods: Service.goodsType) => {
		popupRef.value.open(goods)
		popupRef.value.title = `高端${props.currentNavInfo.parentName + '(' + goods.secondName + ')'}`
	}
</script>
<script lang="ts">
	export default {
		name: "ChangeClothes"
	}
</script>

<style scoped lang="scss">
	@import "../styles/changeClothes.scss"
</style>